<template>
    <div>
        <el-row>
            <el-col :lg="11">
                <el-form ref="form" :rules="rules"  :model="form" label-width="100px">
                    <el-form-item label="用户名" prop="username" required>
                        <el-input v-model="form.username" placeholder="用户登录使用的用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" show-password placeholder="若不修改请勿填写"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="name">
                        <el-input v-model="form.name" placeholder="显示名称"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="联系邮箱, 方便发送邮件报警等通知"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="mobile">
                        <el-input v-model="form.mobile" placeholder="手机号码"></el-input>
                    </el-form-item>
                    <el-form-item label="用户组">
                        <el-checkbox-group v-model="form.role">
                            <el-checkbox
                                v-for="v in roles" :label="v.id"  :key="v.id"
                                v-if="
                                    userInfo.role.includes(v.id)
                                    ||
                                    userInfo.created_role_ids.includes(v.id)
                                    ||
                                    userInfo.role.includes(1)"
                            >{{ v.name }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="头像">
                        <el-upload
                            class="avatar-uploader"
                            :action="upload.action"
                            :data="upload.data"
                            :headers="$store.getters['backend/header']"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                            <img v-if="form.avatar !== ''" :src="form.avatar" class="avatar"
                                 :preview-src-list="[form.avatar]"
                                 style="max-width:100px; height: auto"/>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
                        <el-button @click="cancel">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :lg="12" :offset="1">
                <el-alert :closable="false" type="warning">未设置时以角色对应渠道为准。设置后则使用独立配置。</el-alert>
                <checkbox-app-source class="mt-10" v-model="form.sources"></checkbox-app-source>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import CheckboxAppSource from '~/components/Checkbox/app-source';

export default {
    components: {
        CheckboxAppSource,
    },
    props: {
        data: {

        }
    },
    data() {
        return {
            loading: false,
            form: {},
            formDefault: {
                id: 0,
                username: '',
                password: '',
                name: '',
                email: '',
                mobile: '',
                role: [],
                sources: [],
                avatar:''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            },
            upload: {
                action: '/admin/api/upload',
                data: {
                    type: 'avatar',
                }
            },
            userInfo: this.$store.state.manager.info
        }
    },
    computed: {
        roles () {
            return this.$store.state.role.all;
        }
    },
    watch: {
        data (newVal) {
            this.syncForm();
        }
    },
    methods: {
        getFormAction() {
            return this.form.id ? 'manager/Update' : 'manager/Store';
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                this.loading = true;
                delete this.form.roles
                console.log(this.form.role)
                this.$store.dispatch(this.getFormAction(), this.form).then(res => {
                    this.$message.success(res.data.message);
                    this.$store.dispatch('manager/Info');
                    this.$emit('submit');
                }).finally(() => {
                    this.loading = false;
                });
            });
        },
        cancel() {
            this.$emit('cancel');
        },
        syncForm() {
            this.form = Object.assign({}, this.data.id ? this.data : this.formDefault);
            if (this.form.id) delete this.rules['password'];
            if (!this.form.sources) this.form.sources = [];
        },
        // 获取所有角色
        getRoles() {
            // if (!this.roles.length){
            //     this.$store.dispatch('role/All').then(res => {
            //         this.form.role = res.data;
            //         console.log(this.form)
            //     }).finally(() => {
            //         this.loading = false;
            //     });
            // }
            if (!this.roles.length) this.$store.dispatch('role/All', 'role');

        },
        handleAvatarSuccess(res, file) {
            this.form.avatar = res.url;
            this.loading = false
        },
    },
    created () {
        this.syncForm();
        this.getRoles();
    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
.avatar-uploader {
    width: 100px;
    height: 100px;
    border: 1px dashed grey;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
</style>

